<template>
  <div class="tag-selector">
    <!-- <label>{{label}}</label> -->
    <i-select
      ref="select"
      class="ivu-auto-complete"
      :label="label"
      :disabled="disabled"
      :placeholder="placeholder"
      :size="size"
      filterable
      remote
      auto-complete
      :remote-method="remoteMethod"
      @on-change="handleChange">
      <slot name="input">
        <i-input
          ref="input"
          slot="input"
          v-model="currentValue"
          :name="name"
          :placeholder="placeholder"
          :disabled="disabled"
          :size="size"
          :icon="inputIcon"
          @on-click="handleClear"
          @on-enter="handleEnter"
          @on-focus="handleFocus"
          @on-blur="handleBlur"></i-input>
      </slot>
      <slot>
          <i-option v-for="(item, index) in filteredData" :title="item" :value="item" :key="'selector_' + index">{{ item }}</i-option>
      </slot>
    </i-select>
    <i-tag v-for="(value, index) in values" :title="value" :key="value" :closable="true" @on-close="removeValue(index)">{{value}}</i-tag>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'TagSelector',
  props: {
    label: {
      type: [String, Number],
      default: ''
    },
    values: {
      type: Array,
      default: () => {
        return []
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    size: {
      validator(value) {
        return ['small', 'large', 'default'].indexOf(value) !== -1
      }
    },
    name: {
      type: String
    },
    subject: {
      type: Number
    },
    grade: {
      type: Number
    }
  },
  data() {
    return {
      currentValue: '',
      disableEmitChange: false // for Form reset
    }
  },
  computed: {
    ...mapGetters({
      tags: 'tags'
    }),
    data() {
      return this.tags.map(tag => tag.data.name)
    },
    inputIcon() {
      let icon = ''
      if (this.clearable && this.currentValue) {
        icon = 'ios-close'
      } else if (this.icon) {
        icon = this.icon
      }
      return icon
    },
    filteredData() {
      let val = this.currentValue
      if (val) {
        return this.data.filter(item => item.indexOf(val) !== -1)
      }
      return this.data
    },
    placeholder() {
      return '输入完成后按回车键添加' + this.label
    }
  },
  mounted() {
    this.search()
  },
  watch: {
    currentValue(val) {
      this.$refs.select.query = val
      this.$emit('input', val)
      if (this.disableEmitChange) {
        this.disableEmitChange = false
        return
      }
      this.$emit('on-change', val)
      // this.dispatch('FormItem', 'on-form-change', val);
    },
    grade() {
      this.search()
    },
    subject() {
      this.search()
    }
  },
  methods: {
    ...mapActions({
      searchTags: 'searchTags'
    }),
    remoteMethod(query) {
      this.$emit('on-search', query)
    },
    search() {
      if (!this.subject || !this.grade) return
      this.searchTags({
        subject: this.subject,
        grade: this.grade
      })
    },
    removeValue(index) {
      this.values.splice(index, 1)
    },
    handleChange(val) {
      this.currentValue = val
      this.$refs.select.model = val
      // this.$refs.input.blur();

      if (val === '') return
      var index = this.values.indexOf(val)
      if (index !== -1) this.values.splice(index, 1)
      this.values.push(val)
      this.currentValue = ''

      this.$refs.select.visible = false
    },
    handleFocus() {
      this.$refs.select.visible = true
    },
    handleBlur() {
      this.$refs.select.visible = false
    },
    handleEnter(e) {
      this.handleChange(this.currentValue)
    },
    handleClear() {
      if (!this.clearable) return
      this.currentValue = ''
      this.$refs.select.model = ''
    }
  }
}
</script>
<style scoped lang="less">
label {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: bold;
  display: block;
}
.ivu-select-item {
  display: inline-block;
}
</style>
